/* global */
body{font-family:verdana,"MicroSoft YaHei"}

a,span,div,p,ul,li,ol,b{-webkit-user-select:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}

.xy_c{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;}

.swiper-slide{position:relative;overflow:hidden;width:100%;height:100%;}

.delay_100ms{ -webkit-animation-delay:100ms; animation-delay:100ms; }
.delay_200ms{ -webkit-animation-delay:200ms; animation-delay:200ms; }
.delay_300ms{ -webkit-animation-delay:300ms; animation-delay:300ms; }
.delay_400ms{ -webkit-animation-delay:400ms; animation-delay:400ms; }
.delay_500ms{ -webkit-animation-delay:500ms; animation-delay:500ms; }
.delay_600ms{ -webkit-animation-delay:600ms; animation-delay:600ms; }
.delay_700ms{ -webkit-animation-delay:700ms; animation-delay:700ms; }
.delay_800ms{ -webkit-animation-delay:800ms; animation-delay:800ms; }
.delay_900ms{ -webkit-animation-delay:900ms; animation-delay:900ms; }
.delay_1s{ -webkit-animation-delay:1s; animation-delay:1s; }
.delay_1100ms{ -webkit-animation-delay:1.1s; animation-delay:1.1s; }
.delay_1200ms{ -webkit-animation-delay:1.2s; animation-delay:1.2s; }
.delay_1300ms{ -webkit-animation-delay:1.3s; animation-delay:1.3s; }
.delay_1400ms{ -webkit-animation-delay:1.4s; animation-delay:1.4s; }
.delay_1500ms{ -webkit-animation-delay:1.5s; animation-delay:1.5s; }
.delay_1600ms{ -webkit-animation-delay:1.6s; animation-delay:1.6s; }
.delay_1700ms{ -webkit-animation-delay:1.7s; animation-delay:1.7s; }
.delay_1800ms{ -webkit-animation-delay:1.8s; animation-delay:1.8s; }
.delay_1900ms{ -webkit-animation-delay:1.9s; animation-delay:1.9s; }
.delay_2s{ -webkit-animation-delay:2s; animation-delay:2s; }
.delay_2_2s{ -webkit-animation-delay:2.2s; animation-delay:2.2s; }
.delay_2300ms{ -webkit-animation-delay:2.3s; animation-delay:2.3s; }
.delay_2400ms{ -webkit-animation-delay:2.4s; animation-delay:2.4s; }
.delay_2500ms{ -webkit-animation-delay:2.5s; animation-delay:2.5s; }
.delay_2700ms{ -webkit-animation-delay:2.7s; animation-delay:2.7s; }
.delay_3s{ -webkit-animation-delay:3s; animation-delay:3s; }
.delay_5s{ -webkit-animation-delay:5s; animation-delay:5s; }

.logo{position:absolute;left:15px;top:15px;z-index:999;margin:0;}
.page_index .snacky{z-index:1;margin-top:12%;}
.page_index .txt {z-index:9;}
.page_index .txt .abs{position:absolute;top:0;left:0;}
.page_index .house{position:absolute;bottom:0;width:100%;z-index:2;background:url("../images/indexHouse.jpg") 0 100% repeat-x;background-size:100% auto;}
.page_index .bgmove0{left:-100%;}

.slide_dog{background:#fe657a;}
.txtbox .txtleft{position:absolute;left:25px;top:25px;z-index:9;}
.txtbox .txtright{position:absolute;right:25px;bottom:25px;z-index: 9;}
.txtbox .txtleft .abs,
.txtbox .txtright .abs{left:0;top:0;position:absolute;}
.rolebox{position:relative;float:right;z-index:1;}
.rolebox .lights{position: absolute;right:0;top:0;}
.rolebox .star{position: absolute;left:0;bottom:0;}

.slide_cat{background:#09bee3}
.slide_cat .rolebox{float:left;}

.slide_fix{background:#36a15c;overflow:hidden;}
.slide_fix .role{position:relative;}
.slide_fix .pickme{z-index:9;}
.slide_fix .abs{position:absolute;top:0;left:0;}
.slide_fix .role_dog{z-index:9;}
.slide_fix .role_cat{z-index:2;}
.btn_notice{text-align:center;position:absolute;width:100%;bottom:50px;}
.btn_notice .txt{display:block;width:100%;text-align:center;position:relative;background:url("../images/FixArrowTxt.png") 50% 50% no-repeat;height:61px;}
.btn_notice .you{top:0;left:0;position:absolute;width:100%;text-align:center;display:block;}
.slide_fix .btn_dog,
.slide_fix .lights_cat,
.slide_fix .lights_dog,
.slide_fix .btn_cat{z-index:9;}

.slide_titles{background:#669cff;}
.slide_titles .txt{text-align:center;padding:14% 0 0;}
.slide_titles .titles{position:absolute;top:50%;}
.slide_titles .abs{position:absolute;top:0;left:0;}

.slide_end{background:#fff;height:100%;}
.slide_end .txt{font-size:50px;color:#669cff;font-weight:bold;text-align:center;margin:20% auto;}
.slide_end .btnbox{position:absolute;bottom:12%;left:0;width:100%;text-align:center;}
.slide_end .btnbox .btns{width:100%;}
.slide_end .btnbox a{display:inline-block;width:auto;margin:15px;}
.slide_end .searchbox{border:solid 1px #959ba0;overflow: hidden;margin:0 15%;padding:5px;position:relative;}
.slide_end .keywords{overflow:hidden;display:inline-block;position:relative;}
.slide_end .keywords .layer{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}
.slide_end .btn_search{background:url("../images/iconsZoom.png") 50% 50% no-repeat #669cff;height:100%;width:50px;position:absolute;right:0;top:0;}

html .noshow{display:none!important;}

.music_btn{position:absolute;background:url("../images/musicBtn.png") 50% 50% no-repeat;padding:50px;z-index: 999;right:0;top:0;}
.music_btn.off{background-image:url("../images/musicBtnOff.png")}

/* iPhone 3  */
@media only screen
and (device-width : 320px)
and (device-height : 480px){
    .rolebox{top:-10%;}
    .slide_fix .abs,
    .slide_fix .role{margin-top:-10%}
    .slide_fix .btn_dog,
    .slide_fix .btn_cat{margin-top:-25%;z-index:9;}
    .btn_notice{z-index:999;}
    .btn_notice .you{margin-top:24px;}
}
@media only screen
and (device-width : 320px)
and (device-height : 480px)
and (-webkit-min-device-pixel-ratio: 2){
    .rolebox{top:-10%;}
}

/* iPhone 6  */
@media only screen
and (device-width : 375px)
and (device-height : 667px){
    .rolebox{top:5%;}
}
/* iPhone 6 plus  */
@media only screen
and (device-width : 414px)
and (device-height : 736px){
    .rolebox{top:5%;}
}
/* iPhone 5 */
@media only screen
and (device-width : 320px)
and (device-height : 568px){
    .rolebox{top:5%;}
}
